<script setup lang="ts">
import type { SongInfo } from '@/model/songInfo'

// const host = '192.168.192.221'
// const port = '50081'
const songIconPath = '/images/songIcon'
// const prefix = `http://${host}:${port}/musicpill` // 网络文件
const prefix = '' // 本地文件

const { data: songList } = await useFetch('/api/songInfo')

const getImageUrl = (songIcon: string) => {
    return `${prefix}${songIconPath}/${songIcon}`
}
</script>

<template>
    <van-nav-bar title="歌曲列表"></van-nav-bar>
    <van-grid :border="false" :column-num="2" class="pl-[5vw] pr-[5vw]">
        <van-grid-item
            v-for="(song, currentIndex) in songList as SongInfo[]"
            :key="song.songName"
            @click="
                navigateTo({
                    path: '/songPlay',
                    query: {
                        songListJsonString: JSON.stringify(songList),
                        currentIndex: currentIndex
                    }
                })
            "
        >
            <van-image fit="contain" radius="5vw" width="35vw" height="35vw" :src="getImageUrl(song.songIcon)" />
            <van-row class="text-[4vw] pt-[2vh]">{{ song.songName }}</van-row>
        </van-grid-item>
    </van-grid>
</template>

<style lang="scss"></style>
